<template>
  <div class="valvole-item" :style="style" @click="handleClick">
    <img v-if="isOpen" src="../assets/home/阀门-开.png" alt="">
    <img v-else src="../assets/home/阀门-关.png" alt="">
  </div>
</template>

<script>
import {updateAutoAll} from "@/api/init";

export default {
  name: "ValvoleItem",
  props:{
    value:{
      type:Object
    },
    top:{
      type:Number
    },
    left:{
      type:Number
    },
    position:{
      type:Number
    },
    isAuto:{
      type:Boolean
    }
  },
  computed:{
    isOpen:function (){
      return this.value?.[this.positionLabel] === 1
    },
    style:function (){
      return {
        left:`${this.left}px`,
        top:`${this.top}px`
      }
    },
    positionLabel:function (){
      return this.position === 1?'inletValve':'outletValve'
    }
  },
  methods:{
    handleClick: async function (){
      try {
        console.log(this.isAuto)
        if (this.isAuto) {
          this.$message.error('自动模式，不允许手动控制')
          return
        }
        await this.$msgbox.confirm('此操作会影响设备自动运行逻辑是否进行手动控制', '提示')
        const {msg} = await updateAutoAll({
          direction: this.position,
          eqId: this.value.id,
          status: this.isOpen ? 2 : 1
        })
        this.$message.success(msg)
      } catch (e) {
      }
    }
  }
}
</script>

<style scoped lang="scss">
.valvole-item{
  position: absolute;
  cursor: pointer;
}
</style>
